3.5

(4)

今天，有个Q群问如何实现用户访问网站，自动，作为一个扒站魔改主题的站长，emmm，小菜一碟。

在进入正文前，说下js的来历。之前，有个访客在我网站留言，问如何实现用户开启广告屏蔽插件，网站顶部自动加个广告被屏蔽的提醒，然后给了我个示例网站，让我扒一下。emmm，知乎，不好扒，然后，我又找了几个站，发现了段代码，挺好的。最后，魔改了下css跟js，实现非弹窗式友好型提醒广告被屏蔽的功能。

自动弹窗

好了，接下来就是正文了。将以下代码放置于你想弹窗的位置，即可。如果你想全站弹窗，请添加到footer.php；首页，请添加到index.php；文章页的话，post.php里即可。不同博客程序，可能稍有区别，emmm，自己体会吧。

.addesc img{max-width:100%}.addkillcont{position: fixed;width: 100%;height: 2000px;z-index: 999999;top: 0px;background: #CCC;

filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#BF000000,endColorstr=#00000000);background-color: rgba(103, 99, 99, 0.59);}

.addesc{position: relative;margin-left: auto;margin-right: auto;background: #FFF;border: 1px solid #CCC;webkit-box-shadow: 0 0 20px rgba(27,22,22,0.3);-moz-box-shadow: 0 0 20px rgba(27,22,22,0.3);-o-box-shadow: 0 0 20px rgba(27,22,22,0.3);box-shadow: 0 0 20px rgba(27,22,22,0.3);padding: 10px;margin-top: 10px;font-family: "Microsoft Yahei","Helvetica Neue",Helvetica,Arial,sans-serif;}

img{margin:0 auto;display:block}

$(document).ready(function(){

setTimeout(function(){new QXAdTest().init();},1);

});

function QXAdTest(){

var thisObj = this;

this.init = function(){

try{

this.DoShow();

$('.idcloseadtips').on("click",function(){

$("#idadkillsho").remove();

});

}catch(e){

$("#idadkillsho").remove();

}

};

this.DoShow =function(){

try{

var TPL='

'

'

''+

'点此关闭'+

'

'

var TPLObj = $(TPL);

TPLObj.appendTo($('BODY')).hide().fadeIn(500,function(){

$("#addesc").animate({"margin-top":"150px"},600);

$("#addesc").slideDown(500,function(){

$("#addesc").animate({"height":"250px"},600);

}

);

//自动移除弹窗代码调用

thisObj.DelayRemove();

});

}catch(e){

$("#idadkillsho").remove();//弹窗关闭按钮的调用

}

}

this.DelayRemove = function(){

setTimeout(function(){

$("#addesc").fadeOut(600,function(){

$("#idadkillsho").remove();

});

},10000);//自动移除时间，这里单位是ms

}

}

代码解释代码中的第1行，是jq调用，如果你主题已经调用了jq，请去除第一行代码。判断是否调用jq(右键网页，查看源码，搜索jquery)。

代码中的第30行，width:80%表示弹窗的宽度，占屏幕宽度的80%。

代码中第32行，图片链接与图片说明，请更改。

代码中的第38行，150px表示弹窗距离网页顶部的距离。

代码中的第41行，250px表示弹窗的高度。

代码中的第56行，数字表示了自动关闭弹窗的时间，单位是ms。

后续说明

我只是实现了功能，js基本没问题，css简直飞起，会改的自行修改吧。不会改的，下方留言即可。

提交评分

共计4人评分，平均3.5分

到目前为止还没有投票~

很抱歉，这篇文章对您没有用！

让我们改善这篇文章！

告诉我们我们如何改善这篇文章？提交反馈

旧站文章，作者：古哥，如若转载，请注明出处：https://iymark.com/website/javascript-box-pic.html